<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function revise(){
            //0.收集用户信息
            var $fid=fid.value;
            var $fname=fname.value;
            console.log($fid);
            //非空验证
            if(!$fid){
                alert("编号不能为空");
                return;
            }
            if(!$fname){
                alert("类别不能为空");
                return;
            }
            //1.创建xhr异步对象
            var xhr=new XMLHttpRequest();
            //2.创建请求,打开连接
            xhr.open("put",`/laptop_family/v1/laptop_family_revise`,true);
            //3.发送请求
            //3.1创建请求主体
            var formdata=`fid=${$fid}&fname=${$fname}`;
            console.log(formdata);
            //3.2设置请求头信息
            // console.log(formdata)
            xhr.setRequestHeader=("content-type","application/x-www-form-urlencoded");
            xhr.send(formdata);
            //4.接收响应
            xhr.onreadystatechange=function(){ 
                if(xhr.readyState==4 && xhr.status==200){
                    var r=xhr.responseText;
                    if(r==1){
                        alert("修改成功")
                    }else{
                        alert("修改失败")
                    }
                }
            }
        }
    </script>
</head>
<body>
    
    <input type="text" id="fid">编号
    <input type="text" id="fname">类别
    <button onclick="revise()">修改</button>
</body>
</html>